<div class="grid_4 mr20 mb12" style="background-color: #EBEFF9;border: solid 1px #C9D7F1;">
    <div class="pt4 pl4 pr4 pb4">
        <div class="OAuths">
            <div class="OAumenu oauth" onclick="manu('oauth')">
                <div class="C1">
                    OAuth 2.0
                </div>
                <span class="C2"></span>
            </div>
            <div class="OAumenu apis" onclick="manu('apis')">
                <div class="C1">
                    Google APIs
                </div>
                <span class="C2"></span>
            </div>
            <div class="OAumenu auth" onclick="manu('auth')">
                <div class="C1">
                    Authorized API Access
                </div>
                <span class="C2"></span>
            </div>
            <div class="OAumenu apanel active" onclick="manu('apanel')">
                <div class="C1">
                    APanel 1.1.9
                </div>
                <span class="C2"></span>
            </div>
            <div class="OAumenu security" onclick="manu('security')">
                <div class="C1">
                    Sercurity
                </div>
                <span class="C2"></span>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="grid_18">
    <div class="bdccc gadiend-white oauth OAucontent hidden">
        <div class="bdbccc lh28 pl20 pt2 pb2">Using OAuth 2.0 for Login</div>
        <div class="pt20 pb20 pl20 pr20">
<pre>
Google APIs use OAuth 2.0 for authentication and authorization. You can also choose to use Google's authentication system as a way to outsource user authentication for your application. This can remove the need to create, maintain, and secure a username and password store.

This article describes how you can outsource user authentication to Google and gain access to a user's profile.

The Google endpoints described here align with the <strong>OpenID Connect</strong> specification, which at the time of this writing, is in early draft stage. For reference, the OpenID Connect specification is very similar to the OAuth 2.0 protocol. These Google endpoints will update as the specification matures.
</pre>            
        </div>
    </div>
    <div class="clear"></div>
    
    
    <div class="bdccc gadiend-white OAucontent apis hidden">
        <div class="bdbccc lh28 pl20 pt2 pb2">Using OAuth 2.0 to Access Google APIs</div>
        <div class="pt20 pb20 pl20 pr20">
<pre>
Google APIs use the <a class="fwb" href="http://tools.ietf.org/html/draft-ietf-oauth-v2-22"><strong>OAuth 2.0 protocol</strong></a> for authentication and authorization. Google supports several OAuth 2.0 flows that cover common web server, JavaScript, device, installed application, and server to server scenarios.

OAuth 2.0 is a relatively simple protocol and a developer can integrate with Google's OAuth 2.0 endpoints without too much effort. In a nutshell, you register your application with Google, redirect a browser to a URL, parse a token from the response, and send the token to the Google API you wish to access.

This article gives an overview of the OAuth 2.0 scenarios Google supports and provides links to more detailed content.

Given the security implications of getting the implementation correct, we <strong>strongly</strong> encourage developers to use OAuth 2.0 libraries when interacting with Google's OAuth 2.0 endpoints (see <strong>Client libraries</strong> for more information). Over time, more features will be added to these libraries.
</pre>            
        </div>
    </div>
    <div class="clear"></div>

    <div class="bdccc gadiend-white OAucontent auth hidden">
        <div class="bdbccc lh28 pl20 pt2 pb2">Authorized API Access</div>
        <div class="pt20 pb20 pl20 pr20">
<pre>
OAuth 2.0 allows users to share specific data with you (for example, contact lists) while keeping their usernames, passwords, and other information private. A single project may contain up to 20 client IDs.
</pre>            
        </div>
    </div>
    <div class="clear"></div>
    
    <div class="bdccc gadiend-white OAucontent apanel">
        <div class="bdbccc lh28 pl20 pt2 pb2">Admin Panel 1.1.9</div>
        <div class="pt20 pb20 pl20 pr20">
<pre>
Admin Panel nhằm mục đích quản lý trang web theo nhu cầu cơ bản nhất.
Được thiết kế đơn giản nhưng dễ sử dụng, đầy đủ chức năng cần thiết.
Được tích hợp các Công cụ, Control sau :
    ✓ Bộ công cụ <strong>jwWidgets</strong> © phiên bản phi thương mại.
        Phiên bản thương mại có mức phí từ $99 đến $999.
    <a href="http://www.jqwidgets.com" target="_blank"><img style="background: #000" src="http://www.jqwidgets.com/wp-admin/images/logo_bw.png"/></a>


    ✓ Công cụ quản lý file <strong>KCfinder</strong> ©
    <a href="http://kcfinder.sunhater.com" target="_blank"><img src="http://kcfinder.sunhater.com/files/img/kcfinder-icon64.png"/></a>
        Release date: August 25, 2011
        Author: Pavel Tzonkov
        Licenses: GPLv2 & LGPLv2
    
    ✓ Các công cụ hỗ trợ nhập liệu...
</pre>            
        </div>
    </div>
    <div class="clear"></div>
   
    <div class="bdccc gadiend-white OAucontent security hidden">
        <div class="bdbccc lh28 pl20 pt2 pb2">Sercurity</div>
        <div class="pt20 pb20 pl20 pr20">
<pre>
Điểm mạnh
    ✓ Vì sử dụng hệ thống OAuth từ <strong>Google</strong> nên tài khoản đảm bảo tính bảo mật.
    ✓ Không sợ keylog, thông tin tài khoản được bảo mật.
    ✓ Nhiều người dùng, cùng hệ thống phân quyền gồm 10 mức độ.
    ✓ Liên kết chặt chẽ với tài khoản Google.

Hạn chế
    ✓ Bắt buộc phải có tài khoản Google.
    ✓ Khó để nhiều người dùng chung 1 tài khoản.

    <img src="https://developers.google.com/accounts/images/expandconsent.png"/>
</pre>            
        </div>
    </div>
    <div class="clear"></div>
</div>
<style>
    table {
        display: inline-block;
        border-collapse: collapse;
    }
    th, td {
        display: table-cell;
    }
    tr {
        display: table-row;
    }
</style>
<script>
    function manu(t){
        $(".OAumenu.active").removeClass("active");
        $(".OAumenu."+t).addClass("active");
        $(".OAucontent").hide();
        $(".OAucontent."+t).fadeIn(1000);
    }
</script>